<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#712cf9">
  <title>MyWhether.com</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/pricing/">
  <link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  <!-- Favicons -->
  <link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
  <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">


  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="main">
    <!-- HTML of Navbar starts here -->
    <nav class="navbar navbar-expand-lg ">
      <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="#">MyWhether</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">



          </ul>
          <button class="btn btn-outline-success">add your city</button>

        </div>
      </div>
    </nav>
    <form class="d-flex searchcontainer" role="search">
      <input id="city" class="form-control me-2 " type="search" placeholder="Search your city here" aria-label="Search">
      <button class="btn btn-outline-success" type="submit" id="submit">Search </button>
    </form>
    

   <!-- HTML of main body starts here -->
    <main>
      <div class="text-center my-4 fs-1 fw-normal">Wheather of 
        <div id="loader" class="loader"></div>
        <span style="color: rgb(14, 14, 126) ;font-weight: bold;"id="cityName" class="fw-bold ">

        </span>
      </div>
      <div class="d-flex flex-column flex-sm-row ">

        <div class="col card-width cards ">
          <div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center  ">
            <div class="w-full card-header py-3 border  ">
              <h4 class="my-0 fw-normal">Temprature</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title pricing-card-title"><span id="temp"></span><small
                  class="text-muted fw-light"> <span>&#8451;</span> </small></h1>
              <ul class="list-unstyled mt-3 mb-4">
                <li></li>

              </ul>
             
            </div>
          </div>
        </div>
        <div class="col card-width cards">
          <div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center  ">
            <div class="card-header py-3">
              <h4 class="my-0 mx-4 fw-normal ">Wind</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title pricing-card-title"><span id="wind_speed"></span><small class="text-muted fw-light">
                  km/hr</small></h1>
              <ul class="list-unstyled mt-3 mb-4">
                <li></li>

              </ul>
             
            </div>
          </div>
        </div>
        <div class="col card-width cards">
          <div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center  ">
            <div class="card-header py-3 ">
              <h4 class="my-0 fw-normal">humidity</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title pricing-card-title"><span id="humidity"></span><small
                  class="text-muted fw-light">%</small></h1>
              <ul class="list-unstyled mt-3 mb-4">
                <li> </li>

              </ul>
              
            </div>
          </div>
        </div>
        <div class="col card-width cards">
          <div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center  ">
            <div class="card-header py-3  ">
              <h4 class="my-0 fw-normal">Min temp</h4>
            </div>
            <div class="card-body">
              <h1 class="card-title pricing-card-title"><span id="min_temp"></span><small class="text-muted fw-light"><span>&#8451;</span> 
                  </small></h1>
              <ul class="list-unstyled mt-3 mb-4">
                <li> </li>

              </ul>
             
            </div>
          </div>
        </div>
        <div class="col card-width cards">
          <div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center  ">
            <div class="card-header py-3  ">
              <h4 class="my-0 fw-normal">Max temp</h4>
            </div>

            <div class="card-body">
              <h1 class="card-title pricing-card-title"><span id="max_temp"></span><small class="text-muted fw-light">
                  <span>&#8451;</span></small></h1>
            </div>
          </div>
        </div>
      </div>

        <!--  HTML of city wheather table starts here -->
      <div class="table-responsive">
        <table class="table text-center">
          <thead>
            <tr>
              <th style="width: 14%;" class="mx-auto"></th>
              <th style="width: 12%;">Temprature</th>
              <th style="width: 12%;">Wind</th>
              <th style="width: 12%;">humidity</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" class="text-start">Delhi</th>
              <td><span id="delhi_temp"></span></td>
              <td><span id="delhi_wind_speed"></span></td>
              <td><span id="delhi_humidity"></span></td>
            </tr>
            <tr>
              <th scope="row" class="text-start">London</th>
              <td><span id="london_temp"></span></td>
              <td><span id="london_wind_speed"></span></td>
              <td><span id="london_humidity"></span></td>
            </tr>
          </tbody>

          <tbody>
            <tr>
              <th scope="row" class="text-start">New York</th>
              <td><span id="newyork_temp"></span></td>
              <td><span id="newyork_wind_speed"></span></td>
              <td><span id="newyork_humidity"></span></td>
            </tr>
            <tr>
              <th scope="row" class="text-start">Tokyo</th>

              <td><span id="tokyo_temp"></span></td>
              <td><span id="tokyo_wind_speed"></span></td>
              <td><span id="tokyo_humidity"></span></td>


          </tbody>
        </table>
      </div>
    </main>


  <!-- footer starts here -->
    </div>
      <footer class="text-center ">
        <hr class="m-auto mt-4" style="width: 50%">
        Made using <a style="text-decoration: none;" href="https://rapidapi.com/" target="_blank">rapidapi.com</a> by <a style="text-decoration: none;" href="https://github.com/djv03" target="_blank">Dhruvin</a> 
      </footer>
    </div>
    
    <!-- linking Javascript file -->
    <script type='text/javascript' src='config.js'></script>
    <script src="./script.js"></script>
</body>

</html>